<#import path="/base/Drag.class,/Tools.class,/Tab.class,/base/Shape.class" root="{{LAM.classPath}}" />
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拖拽实例</title>



	<script type="text/javascript">
		LAMJS.run(function() {
			'use strict';
			var System = this;
			System.use();



		});

	</script>






<style type="text/css">
.abs{position:absolute;top:0;left:0;}
.box{width:50px;height:50px;background:red;}
#box3{background:#fff;}
.top{top:300px;}
.left{left:300px;}
</style>
</head>

<body>
<div id="box5" class="abs box">box</div>
<div id="box1" class="abs box top">box1</div>
<div id="box2" class="abs box left">box2</div>
<canvas id="box3" class="abs left" width="300" height="200">box3</canvas>
<canvas id="box4" class="abs left" width="300" height="300">box4</canvas>
<canvas id="box6" class="abs left" width="400" height="200">box6</canvas>
<canvas id="box7" class="abs left" width="150" height="150">box7</canvas>
<canvas id="box8" class="abs left" width="150" height="150">box7</canvas>
<canvas id="fivestar" class="abs left" width="150" height="150">fivestar</canvas>
<div id="box" >
	<svg class="abs" xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" style="width: 195px;">
		<polygon points="100,10 40,180 190,60 10,60 160,180"
				 style="fill:red;stroke:blue;stroke-width:3;fill-rule:evenodd;" />
	</svg>
</div>
<script type="text/javascript">

	LAMJS.run(function(){
		'use strict';
		var System=this;
		var dbox1,dbox2,dbox, p1, D,arc1,arc2,arc3,arc4,arc5,sector_1,sector_2,sector_3,sector_4;

		function triangle(){
			var canvas=new System.Html5.Shape(document.getElementById("box6"));
			canvas.triangle().closePath().stroke().fill('red');
			new System.Drag(canvas.theCanvas,{'noText':true});

		}

		function polygon(){
			var canvas=new System.Html5.Shape(document.getElementById("box7"));
			canvas.polygon({'position':{'x':60,'y':70},'n':6,'r':60,'width':0,'callback':null}).closePath().fill('green');
			new System.Drag(canvas.theCanvas,{'noText':true});
		}

		function case1(){
			var canvas=new System.Html5.Shape(document.getElementById("box3"));
			canvas.arc(arc1).fill('green')
					.arc(arc2).fill('#f60')
					.arc(arc3).fill('#fff')
					.arc(arc4).fill('#06f')
					.rect()
					.line().stroke()
					.sector(sector_4).closePath().fill('#eee')
					.sector(sector_3).closePath().fill('#ddd')
					.sector(sector_2).closePath().fill('green')
					.sector(sector_1).closePath().fill('#f60')

					.text({
						'text':'haha',
						'position':{'x':200,'y':75},
						'align':'center',
						'valign':'middle',
						'font':'40px Arial',
						'isRender':true,
						'style':'#000'

					})

//				.image()
				//			.line({
				//				'position':[0,0,300,150],
				//				'width':1.5,
				//				'color':'#000',
				//				'close':false
				//			})
				//			.arc({
				//		'size':[100,75,50,0],
				//		'color':'#f00'
				//	})
//			.fill()

			;
			new System.Drag(canvas.theCanvas,{'noText':true});
		}

		function case2(){
			var canvas=new System.Html5.Shape(document.getElementById("box4"));
			canvas.fillStyle('black').rect({
				'position':{'x':10,'y':10},
				'size':{'w':200,'h':200},
				'fill':true
			}).fill()
					.save()
					.beginPath()

					.rect({
						'position':{'x':0,'y':0},
						'size':{'w':50,'h':50},
						'fill':true
					})
					.clip()
					.beginPath().strokeStyle('red').lineWidth(5)
					.arc({
						'position':{'x':100,'y':100},
						'r':100,
						'counterclockwise':false
					}).stroke().closePath()
					.restore()
					.beginPath()
					.rect({
						'position':{'x':0,'y':0},
						'size':{'w':500,'h':500},
						'fill':true
					}).clip().beginPath().strokeStyle('#f60').lineWidth(5)
					.arc({
						'position':{'x':100,'y':100},
						'r':50,
						'counterclockwise':false
					}).stroke().closePath();
			new System.Drag(canvas.theCanvas,{'noText':true});
		}

		function bezier(){
			var canvas=new System.Html5.Shape(document.getElementById("box8"));
			canvas.beginPath().moveTo(150,0).bezierCurveTo(0,125,300,175,150,300).strokeStyle('#000').stroke();
			new System.Drag(canvas.theCanvas,{'noText':true});
		}

		function fivestar(){
			var canvas = new System.Html5.Shape(document.getElementById('fivestar'));
			canvas.theCanvas.width = 200;
			canvas.theCanvas.height = 200;
			canvas.fillStyle('red').strokeStyle('red').fivestar({
				'position':{'x':100,'y':100},
				'R':80,
				'r':30,
				'rot':0
			}).lineWidth(1).stroke().fill();
			new System.Drag(canvas.theCanvas,{'noText':true});
		}

		function run(){
			D={
				'src':System.ROOT+'/project/images/22.jpg',
				'position':{'x':0,'y':0},
//			'size':{'w':540,'h':258},
//			'clip':{'sx':0,'sy':0,'sw':0,'sh':0},
				'callback':function(){}
			};
			arc1={
				'position':{'x':50,'y':85},
				'r':50,
				'sAngle':0,
				'eAngle':2*Math.PI
			};
			sector_1={
				'position':{'x':100,'y':75},
				'r':50,
				'sAngle':0,
				'eAngle':20
			};
			arc2=System.clone(arc1);
			arc3=System.clone(arc1);
			arc4=System.clone(arc1);
			arc5=System.clone(arc1);

			arc2.r=40;
			arc3.r=30;
			arc4.r=20;
			arc5.r=5;


			sector_2=System.clone(sector_1);
			sector_3=System.clone(sector_1);
			sector_4=System.clone(sector_1);
			sector_2.eAngle=20;
			sector_2.eAngle=60;

			sector_3.eAngle=60;
			sector_3.eAngle=190;

			sector_4.eAngle=190;
			sector_4.eAngle=240;

			new System.Drag(document.getElementById("box5"),{'noText':true});
			dbox1=new System.Drag(document.getElementById("box1"),{'noText':true, 'coord':'x'});
			dbox2=new System.Drag(document.getElementById("box2"),{'noText':true,'coord':'y'});
			dbox=new System.Drag(document.getElementById("box"),{'noText':true});
		}
		$(function(){

			run();
			triangle();
			case1();
			polygon();
			case2();
			fivestar();
			bezier();
		});
	});
</script>
</body>
</html>